<template>
  <v-content style="background-color: #f5f5f5">
    <div @click="skipToAdd" v-if="data.detail.address == null" class="mw-main-background-white mw-row-style" style="height:1.13rem;width: 3.75rem;align-items: center;justify-content: center">
      <div class="mw-first-text-color" style="height:0.4rem;width: 1.2rem;line-height: 0.4rem;text-align: center;font-size: 0.13rem;border-radius: 0.2rem;border:1px solid rgba(51,51,51,1);">添加收货地址</div>
    </div>
    <div v-else style="padding:0.15rem;width: 3.45rem;align-items: center;" class="mw-main-background-white mw-row-spacebetween-style" >
      <div class="mw-column-style" style="width: 3.1rem;">
        <div style="margin-bottom:0.06rem;line-height:0.15rem;text-align:center;width:0.3rem;height:0.15rem;border-radius:0.02rem;border:1px solid rgba(237,61,93,1);font-size: 0.11rem;color: #ED3D5D">默认</div>
        <div class="mw-first-text-color" style="margin-bottom:0.06rem;font-weight: bold;font-size: 0.15rem;width: 3.1rem;line-height: 0.21rem;">{{data.detail.address.full_address}}</div>
        <div class="mw-row-style mw-first-text-color" style="font-size: 0.11rem">
          <div style="margin-right: 0.04rem">{{data.detail.address.name}}</div>
          <div>{{data.detail.address.mobile}}</div>
        </div>
      </div>
      <img src="/static/order_confirm_address_more.png" style="width: 0.05rem;height:0.1rem"/>
    </div>
    <div class="mw-row-spacebetween-style mw-main-background-white" style="margin-top:0.08rem;padding:0.15rem;width: 3.45rem;">
      <img :src="data.detail.goods.image_url" style="height:0.8rem;width:0.8rem;object-fit:cover;"/>
      <div class="mw-column-style" style="justify-content: space-between;width: 2.55rem;">
        <div class="mw-single-line mw-first-text-color" style="font-size: 0.15rem">{{data.detail.goods.name}}</div>
        <div class="mw-single-line mw-third-text-color" style="font-size: 0.11rem">{{data.detail.goods.products[0].name}}</div>
        <div class="mw-row-style" style="align-items: baseline;">
          <div class="mw-main-red" style="font-size: 0.18rem;font-weight: bold">￥{{data.detail.goods.products[0].price}}</div>
          <div class="mw-third-text-color"
               style="font-weight:normal;text-decoration:line-through;font-size: 0.11rem;margin-left:0.01rem;">
            ￥{{data.detail.goods.products[0].original_price}}
          </div>
        </div>
      </div>
    </div>
    <div class="mw-row-spacebetween-style mw-main-background-white" style="width:3.75rem;position: fixed;left:0;bottom:0;height:0.49rem;align-items: center">
      <div class="mw-main-red" style="margin-left:0.2rem;width: 2.55rem;align-items: center;font-size: 0.15rem;width: 1.2rem;height:100%;line-height: 0.49rem;">应付{{data.detail.order_info.pay_amount_text}}</div>
      <div @click="data.submit" class="mw-first-text-color" style="align-items: center;font-size: 0.15rem;width: 1.2rem;height:100%;line-height: 0.49rem;text-align: center;background-color: #FFCF0F;">微信支付</div>
    </div>
  </v-content>


</template>

<script>

  import utils from '../../utils'
  import { mapModules, mapRules } from 'vuet'

  export default {
    mixins: [
      mapModules({ data: 'orderconfirm'}),
      mapRules({need: [{ path: 'orderconfirm' }]}),
    ],

    data() {
      return {
        isShowPic:false
      }
    },


    beforeCreate(){

    },
    created() {

    },
    mounted() {
      var that = this
      this.data.needFetch = true
    },
    methods: {
      skipToAdd() {
        this.data.needFetch = false
        this.$router.push({ name: 'newaddress'})
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
